<template>
  <div class="finish-container">
    <template v-if="list.length > 0">
      <div class="item" v-for="(item, index) in list" :key="index">
        <p class="creat-time">创建时间：{{ item.createTime || "-" }}</p>
        <div class="info-wrap">
          <header>
            <p class="f16">
              <span>{{ item.businessName }}</span>
              <span>账户：{{ item.createId || "-" }}</span>
            </p>
            <div class="level1-wrap">
              <div class="left">
                <img :src="item.mainPicUrl" alt="" />
              </div>
              <div class="right">
                <div class="name text-over f14">{{ item.productName || "-" }}</div>
                <el-row class="info f12">
                  <el-col :span="5" class="text-over" style="line-height: 32px">
                    上架类目：<span :title="item.preview">{{ item.preview || "-" }}</span>
                  </el-col>
                  <el-col :span="5" style="line-height: 32px">型号：{{ item.modeCode || "-" }}</el-col>
                  <el-col :span="5" style="line-height: 32px">
                    分类：{{ item.preview ? item.preview.split("-")[item.preview.split("-").length - 1] : "" }}
                  </el-col>
                  <el-col :span="5" class="text-over" style="line-height: 32px">
                    ID：<span :title="item.productId">{{ item.productId || "-" }}</span>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" plain @click="clickEditModel(item)">编辑模型或授权</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </header>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pt20 pb20" style="display: flex; justify-content: flex-end">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="pagination.sizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>

    <div v-else style="display: flex; justify-content: center; width: 100%">
      <el-empty description="暂无数据" />
    </div>

    <!-- 模型授权弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑模型或授权" :width="'800'" align-center :before-close="cancel">
      <modelDialog
        :formValue="modelDetail"
        :btnLoading="btnLoading"
        @update-data="dialogSure"
        @dialogVisible-false="dialogVisible = false"
      ></modelDialog>
      <!-- <div class="model-list-wrap">
        <div class="item mb20" v-for="(item, index) in shopModelList" :key="index">
          <div class="left">
            <img v-show="item.modelType === 1" src="@/assets/images/products/kjl.png" alt="" />
            <img v-show="item.modelType === 2" src="@/assets/images/products/swj.png" alt="" />
            <img v-show="item.modelType === 3" src="@/assets/images/products/3dmax.png" alt="" />
            <img v-show="item.modelType === 4" src="@/assets/images/products/sket.png" alt="" />
          </div>
          <div class="right">
            <div>
              <p>授权模型名称</p>
              <el-input v-model="item.modelName" placeholder="请输入酷家乐模型库型号或模型名称" clearable></el-input>
            </div>
            <div>
              <p>模型授权描述</p>
              <el-input
                v-model="item.modelRemark"
                :rows="3"
                type="textarea"
                placeholder="方便被授权者在酷家乐中快速查询到此模型，请输入酷家乐端的模型名称型号填入上方输入框，或备注详细内容"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer" style="display: flex; justify-content: center">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save" :loading="btnLoading">确认</el-button>
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { _throttle } from "@/utils/index";
import { businessPage, editModel, getSelectModelList } from "@/api/products/waitingModel";
import modelDialog from "./modelDialog.vue";

const list = ref([]);
const dialogVisible = ref(false);
const shopModelList = ref([{ modelType: 1 }, { modelType: 2 }, { modelType: 3 }, { modelType: 4 }]);
const pagination = ref({
  page: 1,
  size: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0
});
const total = ref(0);
const btnLoading = ref(false);
const currObj = ref({}); //当前点击建模的sku对象
const modelDetail = ref({});
const emit = defineEmits(["getTotal", "resetList"]);
const props = defineProps({
  formData: {
    type: Object,
    default: () => {}
  }
});
const dialogSure = async (list, item) => {
  console.log(list, item);
  await save(list, item);
  dialogVisible.value = false;
};
const getList = async () => {
  await businessPage({
    page: pagination.value.page,
    size: pagination.value.size,
    modelStatus: 2,
    ...props.formData
  }).then(res => {
    // console.log("等待建模列表===", res);
    if (res.code === 200) {
      list.value = res.data.records;
      pagination.value.total = res.data.total;
      total.value = res.data.total;

      for (let obj of list.value) {
        for (let item of obj?.shopSkuList || []) {
          item.properties = JSON.parse(item.properties);
        }
      }
      emit("getTotal", total.value);
    }
  });
};
//点击编辑授权信息
const clickEditModel = async obj => {
  currObj.value = obj;
  dialogVisible.value = true;
  await getModelList();
};

//查询当前sku的建模详情
const getModelList = async () => {
  await getSelectModelList({
    applyType: 1, //商家端使用2，运营端使用1
    productId: currObj.value.productId
  }).then(res => {
    if (res.code === 200) {
      console.log("这是建模详情===", res);
      modelDetail.value = res.data;
    }
  });
};

//保存模型授权信息
const save = _throttle((list, form) => {
  btnLoading.value = true;
  const params = {
    applyType: 1, //商家端使用2，运营端使用1
    productId: currObj.value.productId,
    modelRemark: form.modelRemark,
    modelIds: list?.map(item => item.uid)?.join(",")
  };
  editModel(params)
    .then(res => {
      if (res.code === 200) {
        ElMessage({
          duration: 1000,
          showClose: false,
          customClass: "my-success-message",
          dangerouslyUseHTMLString: true,
          message: "<div class='img'></div><p>您已将模型授权信息填写并保存成功 ！</p>"
        });
        btnLoading.value = false;
        dialogVisible.value = false;
        getList();
        emit("resetList");
      }
    })
    .catch(err => {
      btnLoading.value = false;
    });
}, 1000);

//校验模型授权信息是否完善
const checkModel = () => {
  let flagArr = [];
  let atLeastOne = false;
  for (let item of shopModelList.value) {
    if (item.modelName && item.modelRemark) {
      atLeastOne = true;
    }
    if ((item.modelName && item.modelRemark) || (!item.modelName && !item.modelRemark)) {
      flagArr.push(true);
    } else {
      flagArr.push(false);
    }
  }
  return !flagArr.includes(false) && atLeastOne;
};

const cancel = () => {
  dialogVisible.value = false;
  shopModelList.value = [{ modelType: 1 }, { modelType: 2 }, { modelType: 3 }, { modelType: 4 }];
};

const handleSizeChange = val => {
  pagination.value.size = val;
  getList();
};
const handleCurrentChange = val => {
  pagination.value.page = val;
  getList();
};

defineExpose({
  getList,
  total
});
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}
:deep(.el-dialog__title) {
  position: relative;
  margin-left: 32px;
  &::before {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #409eff;
    top: 6px;
    left: -14px;
  }
}
:deep(.el-input__wrapper) {
  background-color: #f2f3f5 !important;
}
:deep(.el-textarea__inner) {
  background-color: #f2f3f5 !important;
}
.finish-container {
  .item {
    .creat-time {
      position: relative;
      padding-left: 14px;
      color: #86909c;
      font-size: 14px;
      margin: 20px 0 10px 0;
      &::before {
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #409eff;
        top: 6px;
        left: 0;
      }
    }
    .info-wrap {
      border: 1px solid #dcdfe6;
      header {
        background-color: #f5f7fa;
        & > p {
          line-height: 50px;
          color: #3d3d3d;
          border-bottom: 1px solid #dcdfe6;
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
          span:last-of-type {
            color: #86909c;
          }
        }
        .level1-wrap {
          display: flex;
          padding: 20px 0;
          .left {
            width: 80px;
            height: 80px;
            margin: 0 0 0 20px;
            border-radius: 4px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            flex: 1;
            padding-left: 20px;
            color: #86909c;
            .name {
              color: #007dff;
              margin-bottom: 20px;
            }
          }
        }
      }

      .level2-wrap {
        padding: 20px;
        & > div {
          max-height: 310px;
          overflow-y: auto;
        }
        .item {
          margin-bottom: 5px;
          background-color: #f5f7fa;
          display: flex;
          padding: 18px 0;
          .left {
            width: 84px;
            height: 64px;
            text-align: right;
          }
          .center {
            flex: 1;
            color: #86909c;
            padding-left: 14px;
            .name {
              color: #3d3d3d;
              margin-bottom: 14px;
            }
            .info {
              max-height: 80px;
              overflow-y: auto;
              img {
                width: 40px;
                height: 40px;
                vertical-align: top;
              }
            }
          }
          .right {
            width: 160px;
            border-left: 1px solid #dcdfe6;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            p {
              color: #86909c;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}
.model-list-wrap {
  // max-height: 400px;
  // overflow-y: auto;
  & > div {
    display: flex;
    .left {
      width: 110px;
      height: 110px;
    }
    .right {
      flex: 1;
      padding-left: 16px;
      & > div {
        display: flex;
        margin-bottom: 10px;
        .el-input,
        .el-textarea {
          flex: 1;
        }
      }
      p {
        width: 90px;
        margin-right: 10px;
        font-size: 14px;
        margin-top: 5px;
      }
    }
  }
}
</style>
